<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=eoXPopp93xim6HaBNrX5QIiO"></script>

</head>
<body>
<div id="container"></div>

<script>
    var map = new BMap.Map("container",{minZoom:17,maxZoom:20});          // 创建地图实例
    var point = new BMap.Point(121.300384,31.36638);  // 创建点坐标
    map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


    function showInfo(e){
        alert(e.point.lng + ", " + e.point.lat);
    }
    map.addEventListener("click", showInfo);


    addRoute1();

 //   addRoute2();

    /**
     * 2号道
     * */
    function addRoute2(){
        var pStart=new BMap.Point(121.295955, 31.368384);
        var pStop= new BMap.Point(121.296036, 31.368399);

    }//end function


    /**
     * 1号道
     */
    function addRoute1(){

        addLabel(121.29742, 31.368238,'会车<br/>提示',-23,23);
        addLabel(121.305769, 31.366303,'直线<br/>行驶',-25,25);
        addLabel(121.307103, 31.364094,'加减<br/>档位',-25,25);
        addLabel(121.305626, 31.366661,'靠边<br/>停车',15,-15);
        addLabel(121.303133, 31.367451,'超车<br/>提示',-30,-45);
        addLabel(121.29834, 31.368989,'公交<br/>车站',-30,-40);
        addLabel(121.296997, 31.36806,'学校<br/>区域',-30,-40);


        addTitle(121.295982, 31.368477,'1号道起终','#a34756',-20,-40);



        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            scale: 0.5,//图标缩放大小
            strokeColor:'#a34756',//设置矢量图标的线填充颜色
            strokeWeight: '2',//设置线宽
        });


        var pStart=new BMap.Point(121.295955, 31.368384);
        var pStop= new BMap.Point(121.296036, 31.368399);

        var p0=new BMap.Point(121.296648,31.367762);
        var p1 = new BMap.Point(121.296669, 31.367729);
        var p2 = new BMap.Point(121.298664, 31.369143); //尚学路，横仓路路口
        var p3= new BMap.Point(121.300451, 31.36633);//丰登路尚学路路口
        var p4= new BMap.Point(121.304745, 31.368006);
        var p5= new BMap.Point(121.307849, 31.362857); //博学路 丰饶路
        var p6=new  BMap.Point(121.307921, 31.362873); //调头
        var p7=new  BMap.Point(121.304759, 31.368103); //回 博学路 丰饶路
        var p8=new  BMap.Point(121.300496, 31.366411);
        var p9=new  BMap.Point(121.298691, 31.36922);//回 丰登路尚学路路口
        var p10=new  BMap.Point(121.296687, 31.36781);//回 尚学路，横仓路路口



        var icons = new BMap.IconSequence(sy, '10', '150');
        // 创建polyline对象
        var pois = [
            pStart,
            p0,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,
            pStop
        ];
        var polyline =new BMap.Polyline(pois, {
            enableEditing: false,//是否启用线编辑，默认为false
            enableClicking: true,//是否响应点击事件，默认为true
            icons:[icons],
            strokeWeight:'2',//折线的宽度，以像素为单位
            strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
            strokeColor:"#a34756" //折线颜色
        });

        map.addOverlay(polyline);

    }//end function





    function addTitle(lng,lat,txt,color,x,y){

        var point = new BMap.Point(lng,lat);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        var label = new BMap.Label(txt,{offset:new BMap.Size(x,y)});
        label.setStyle({
            color : color,
            fontSize : "0.8rem",
            'font-weight':'bold',
            lineHeight : "120%",
            fontFamily:"微软雅黑",
            background:"none",
            border:"none"
        });
        marker.setLabel(label);
    }//end function


    function addLabel(lng,lat,txt,x,y){
        var point = new BMap.Point(lng,lat);
        var opts = {
            position : point,    // 指定文本标注所在的地理位置
            offset   : new BMap.Size(x, y)   //设置文本偏移量
        }
        var label = new BMap.Label(txt, opts);  // 创建文本标注对象
        label.setStyle({
            color : "black",
            fontSize : "0.2rem",
            height : "1.8rem",
            width : "1.8rem",
            'text-align': 'center',
            lineHeight : "120%",
            fontFamily:"微软雅黑",
            background:"#f3f1b8",
            border:"1px solid black"
        });
        map.addOverlay(label);

    }//end function


</script>
</body>
</html>